<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
    <title>分类查询</title>
    <style>
        .card > a {
            text-decoration: none;
            color: rgb(27, 27, 25);
        }
    </style>
</head>

<body>
<!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
<!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
<script src="./js/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>
<script src="./js/holder.js@2.9.7/holder.js"></script>

<!-- 页面导航 -->
<script src="./js/nav.js"></script>
<!-- /页面导航 -->

<div class="container">
    <!-- 面包屑导航 -->
    <div class="row justify-content-center">
        <div class="col-9 " style="background-color: #ccc">
            <nav aria-label="breadcrumb" class="mt-1"  >
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><span id="bread">hhh</span></li>
                </ol>
            </nav>
        </div>
    </div>
</div>
<!-- /面包屑导航 -->


<!-- 商品 -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-9 ">
            <div class="row" id="product">
                <!--商品优化-->
            </div>
        </div>
    </div>

    <!-- 分页组件 -->
    <div class="row justify-content-center">
        <div class="col-8 d-flex justify-content-center mt-1">
            <nav aria-label="Page navigation example">
                <ul class="pagination" id="pageNav">
                    <!-- 优化 ***col-8<--col-6***   -->
                </ul>
            </nav>
        </div>
    </div>
    <!-- /分页组件 -->
</div>
<!-- /商品 -->

<!--  -->
<script>

    let pageChange=function (pageIndex){

        //获得分页的组件
        let pageNav = document.querySelector("#pageNav");
        breadNav=document.getElementById("bread");

        //1.获得地址栏中的数据
        let url=location.href;
        let index=url.search("=");
        let cid=url.substring(index+1);

        //为面包屑导航设置显示的值
        if (cid==1){
            breadNav.innerText='手机数码';
        }else if(cid==2){
            breadNav.innerText='电脑办公';
        }else if(cid==3){
            breadNav.innerText='潮流服饰';
        }else if(cid==4){
            breadNav.innerText='图书影音';
        }
        //2.发送请求
        fetch("page.product?cid="+cid+"&pageIndex="+pageIndex).then(response=>response.json()).then(data=>{
            //console.log(pageIndex);
            loadData(data.data);
            pageNavComponet(data.pageIndex, data.pageTotal);

        });
    }
    pageChange(1);


    //处理跳转添加购物车
    let jumpCart=function (productId){
        fetch(`add.cart?id=${productId}&qty=1`).then(response=>response.json()).then(data=>{
            if(data.flag){
                alert(data.message);
            }
        })
    }


    let loadData=function (datas){
        let productStr = '';
        datas.forEach((e, index) => {
            productStr +=
                `<div class="col-md-6 col-xl-3">
            　　      <div class="card" 　>
                         <a href="product.html?pid=${e.id}">
                  　　       <img src="${e.pimage}" class="card-img-top" alt="...">
                  　　       <div class="card-body">
                    　　           <h5 class="card-title">${e.name}<small>${e.shopPrice}</small></h5>
                    　　           <p class="card-text desc_show">${e.desc}</p>
                             </div>
                          </a>
              　　    <div class="card-body">
                　　          <a  class="card-link">收藏</a>
                　　          <a  class="card-link" onclick="jumpCart(${e.id})">添加购物车</a>
                      </div>
              　　　  </div>
                  </div>`
        });
        let productDiv = document.querySelector("#product");
        productDiv.innerHTML = productStr;
    }


    // 根据起始位置生成li
    let appendLi = function (beginIndex, endIndex,pageIndex) {
        let numerli = '';
        for (let i = beginIndex; i <= endIndex; i++) {
            let active = pageIndex != i ? '' : 'active';
            numerli += ` <li class="page-item ${active}"><a class="page-link" href="javascript:void(0)" onclick="pageChange(${i})">${i}</a></li>`;
        }
        return numerli;
    }
    let pageNavComponet = function (pageIndex, totalPage) {
        let li = '';
        // 头部拼接
        let preli = ` <li class="page-item">
                           <a class="page-link"  aria-label="Previous">
                              <span aria-hidden="true" onclick="pageChange(${pageIndex-1})">&laquo;上一页</span>
                          </a>
                      </li>`;
        preli = pageIndex == 1 ? "" : preli;

        //躯干拼接
        let numerli = '';
        if (totalPage <= 5) {
            numerli = appendLi(1, totalPage,pageIndex);
        }else {
            if (pageIndex + 4 >= totalPage) {  //从第四页及之后开始,都走这里
                //[totalPage-4,totalPage+4]
                numerli = appendLi(totalPage - 4, totalPage,pageIndex);
            } else {                           //在第四页之前都走这里
                //[pageIndex,pageIndex+4]
                numerli = appendLi(pageIndex, pageIndex + 4,pageIndex);
            }
        }

        //底部拼接
        let nextLi = `<li class="page-item">
                          <a class="page-link" aria-label="Next">
                           <span aria-hidden="true" onclick="pageChange(${pageIndex+1})">下一页&raquo; </span>
                          </a>
                        </li>`;
        nextLi = pageIndex == totalPage ? '' : nextLi;
        li = preli + numerli + nextLi
        pageNav.innerHTML = li;

    }

</script>
</body>

</html>